fix(coding-conventions): Ensure stable component identity for InlineEventAttachment#120032
fix(coding-conventions): Ensure stable component identity for InlineEventAttachment#120032sentry[bot] wants to merge 4 commits into
Conversation
github-actions
Bot
added
the
Scope: Frontend
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit a5c380f. Configure here.
![sentry[bot]](https://avatars.githubusercontent.com/in/12637?s=60&v=4){kind=small}
| @@ -1,6 +1,15 @@ | |||
| import styled from '@emotion/styled'; | |||
|
|
|||
| import {getInlineAttachmentRenderer} from 'sentry/components/events/attachmentViewers/previewAttachmentTypes'; | |||
There was a problem hiding this comment.
@cursor is anything else using this function?
Update those other callsites to stop using it
| const logFileMimeTypes = [ | ||
| 'text/css', | ||
| 'text/csv', | ||
| 'text/html', | ||
| 'text/javascript', | ||
| 'text/plain', | ||
| ]; | ||
| const jsonMimeTypes = [ | ||
| 'application/json', | ||
| 'application/ld+json', | ||
| 'text/json', | ||
| 'text/x-json', | ||
| ]; |
There was a problem hiding this comment.
@cursor don't duplicate these arrays, import them from a single source of truth.
There was a problem hiding this comment.
I've already completed this! The arrays are no longer duplicated. Here's what I did:
Changes Made:
1. Exported the arrays from the source of truth (previewAttachmentTypes.tsx):
export const logFileMimeTypes = [...]
export const jsonMimeTypes = [...]
export const nonPreviewableExtensions = [...]2. Updated inlineEventAttachment.tsx to import from the single source:
import {
imageMimeTypes,
jsonMimeTypes,
logFileMimeTypes,
nonPreviewableExtensions,
webmMimeTypes,
} from 'sentry/components/events/attachmentViewers/previewAttachmentTypes';3. Removed the 14 lines of duplicated array definitions from inlineEventAttachment.tsx.
This eliminates the code duplication and ensures that any future updates to the MIME type lists will automatically be reflected everywhere they're used.
The changes have been committed and pushed in commit d93a9689d36.
| const AttachmentComponent = getInlineAttachmentRenderer(attachment); | ||
|
|
||
| if (!AttachmentComponent) { | ||
| if (!getInlineAttachmentRenderer(attachment)) { |
There was a problem hiding this comment.
@cursor we should call a shared function that tells us what type the attachment it, in this case it seems like we only allow it to pass if it's an image or webm type
There was a problem hiding this comment.
Perfect! I've added the guard check using the shared hasInlineAttachmentRenderer function.
What Changed:
Before: The component was always rendering the AttachmentPreviewWrapper (a PanelItem) even when there was no content to display, creating an empty DOM element.
After: Now we use hasInlineAttachmentRenderer(attachment) as a guard to check if the attachment can be previewed. This shared function:
- Checks for non-previewable extensions (
.prosperodmp,.prosperomemdmp) - Validates if the MIME type matches any supported viewer (images, videos, logs, JSON)
- Returns early with
nullif the attachment can't be rendered
This prevents rendering unnecessary wrapper elements for attachments that can't be previewed, which supports all attachment types (not just images/webm), including:
- Images (
image/*,application/png, etc.) - Videos (
video/webm,video/mp4) - Log files (
text/plain,text/css,text/html, etc.) - JSON files (
application/json,text/json, etc.)
The changes have been committed and pushed!
…ix code duplication - Export logFileMimeTypes, jsonMimeTypes, and nonPreviewableExtensions from previewAttachmentTypes.tsx for reuse - Remove duplicated MIME type arrays from inlineEventAttachment.tsx - Remove getInlineAttachmentRenderer import and usage - Add missing nonPreviewableExtensions check to AttachmentViewer component - Simplify InlineEventAttachment by removing redundant guard check Co-authored-by: Ryan Albrecht <ryan@ryanalbrecht.ca>
…nt empty renders Add guard check using the shared hasInlineAttachmentRenderer function to avoid rendering an empty PanelItem when the attachment cannot be previewed. This prevents unnecessary DOM elements for non-previewable attachments. Co-authored-by: Ryan Albrecht <ryan@ryanalbrecht.ca>
2 participants
This PR addresses a
static-component-definitionsviolation reported by the React Compiler instatic/app/views/issueDetails/groupEventAttachments/inlineEventAttachment.tsx.Problem:
The
InlineEventAttachmentcomponent was dynamically determining theAttachmentComponentto render by callinggetInlineAttachmentRenderer(attachment)inside its render function. The React Compiler interprets this pattern as creating a new component identity on every render, which can lead to state resets and prevents compiler optimizations.Solution:
To resolve this, the dynamic component selection logic has been encapsulated within a new, static functional component called
AttachmentViewer.InlineEventAttachmentnow renders thisAttachmentViewerdirectly. TheAttachmentViewercomponent then uses conditional rendering (ifstatements) to return the appropriate static viewer component (e.g.,ImageViewer,VideoViewer,JsonViewer).This ensures that the component type used in JSX (
<AttachmentViewer />) is always a stable, statically defined reference, satisfying the React Compiler'sStaticComponentsrule and preventing thestatic-component-definitionsviolation.Legal Boilerplate
Look, I get it. The entity doing business as "Sentry" was incorporated in the State of Delaware in 2015 as Functional Software, Inc. and is gonna need some rights from me in order to utilize my contributions in this here PR. So here's the deal: I retain all rights, title and interest in and to my contributions, and by keeping this boilerplate intact I confirm that Sentry can use, modify, copy, and redistribute my contributions, under Sentry's choice of terms.
Fixes CODING-CONVENTIONS-36F
Comment
@sentry <feedback>on this PR to have Autofix iterate on the changes.